<template>
  <view>
    <movable-area class="movable-area">
      <movable-view class="movable-view" :x="x" :y="y" direction="all">
        <image src="https://xnlv-test.lizxx.com/image/xnlv/static/xiaoniao.png" class="index" @tap="goToIndex"></image>
      </movable-view>
    </movable-area>
  </view>
</template>

<script>
export default {
  data() {
    return {
      x: 400, // x 坐标
      y: 400, // y 坐标
    };
  },
  methods: {
    goToIndex() {
      // 跳转 daolan
      uni.redirectTo({
        url: '/pages-guide/guide',
      });
    },
  },
};
</script>

<style lang="scss">
.movable-area {
  // 可以移动的范围
  position: absolute;
  z-index: 10;
  height: 100vh;
  width: 100vw;
  top: 0;
  position: fixed;
  pointer-events: none; // 此处要加，鼠标事件可以渗透
.movable-view {
    // 按钮大小
    position: absolute;
    z-index: 10;
    width: 160rpx;
    height: 160rpx;
    pointer-events: auto; // 恢复鼠标事件
    margin-top: 30vh;
  .index {
      position: absolute;
      z-index: 10;
      width: 160rpx;
      height: 160rpx;
    }
  }
}
</style>